<template>

    <div class="page-video">
        <transition name="fade">
            <div class="page_slide" v-if="show">
                <angleBox>
                    <collapse title="主体类型">
                        <div style="padding: .1rem">
                            <a-checkbox-group direction="vertical" v-model="checkedValue">
                                <a-checkbox value="1">药械</a-checkbox>
                                <a-checkbox value="2">食品</a-checkbox>
                                <a-checkbox value="3">设备</a-checkbox>
                            </a-checkbox-group>
                        </div>
                    </collapse>
                    <collapse scroll style="margin-top: .1rem" title="区域" >
                        <div style="padding: .1rem" v-loading="loading">
                            <tree v-bind="treeOptions">
                                <!-- 自定义节点渲染-->
                                <template #node="{ data }">
                                    <div class="tree_node">
                                        <span :class="[ 'tree_node_title',setTreeNodeClass(data)]" :title="data.Name">
                                            {{data.Name}}
                                        </span>
                                        <div v-if="data.Type !== 3" :class="[ 'tree_extra', data.disabled? 'disabled':'' ]">
                                            (<span>{{ data.OnlineMonitorCount }}</span>/{{data.MonitorCount}})
                                        </div>
                                    </div>
                                </template>
                            </tree>
                        </div>
                    </collapse>
                </angleBox>
            </div>
        </transition>
        <div :class="['btn_show ' , show ? '' : 'hide']"
             @click.stop="setShow.toggle">
        </div>
        <div class="page_content">
            <angleBox>
                <videoPlayer :options="playerOptions" ref="myPlayer"></videoPlayer>
<!--                <easyPlayer ></easyPlayer>-->
            </angleBox>
        </div>
    </div>

</template>

<script setup>
    import videoPlayer from '@components/local/videoPlayer'
    import easyPlayer from '@components/local/easyPlayer'
    import tree from '@components/local/tree'

    import {useBoolean, useSetState} from 'vue-hooks-plus'

    const [show, setShow] = useBoolean(true);

    const checkedValue = ref(['1', '2', '3'])

    const myPlayer = ref(null)

    const loading = ref(false)

    const getTreeData=(params , nodeData)=>{
        return $HTTP.post($Server.screen.GetVI_AreaFirmMonitorByIdType, params).then(res => {

            // 手动处理节点数据示例 , 增加一个层级
            let level =  nodeData?.level ? nodeData.level + 1 :1

            return res?.Data ? res.Data.map(item=>{
                const { OnlineMonitorCount , Type , OnlineStatus } = item
                const node = {
                    ...item ,
                    level ,  // 手动添加一个层级
                }
                // 设置叶子节点和禁用
                if(Type !== 3){
                    // 判断区域下是否有在线的设备
                    const isTrue = OnlineMonitorCount===0 || !OnlineMonitorCount
                    node.isLeaf = isTrue
                    node.disabled = isTrue
                }else{
                    // 判断设备是否在线
                    const isTrue = OnlineStatus === 1
                    node.isLeaf = true  // 当前节点是否叶子节点
                    node.disabled = !isTrue  // 当前节点是否禁用
                    node.draggable = isTrue // 当前节点是否可拖拽
                }

                if(!nodeData){
                    loading.value = false
                }
                return  node
            }):[]
        })
    }

    // 设置tree 的渲染配置
    const treeOptions = {

        // 渲染树的静态数据列表
        data: [
            {
                title: 'Trunk 0-0',
                key: '0-0'
            },
            {
                title: 'Trunk 0-1',
                key: '0-1',
                children: [
                    {title: 'Branch 0-1-1', key: '0-1-1'}
                ],
            },
        ],

        // 开启远程数据懒加载加载 , 开启后 data 设置无效
        load:{
            // 远程数据加载方法
            query:async (params , nodeData) => {  // 参数 ， 懒加载时当前的节点数据
                // 初始化时 ， 加载loading
                if(!nodeData){
                    loading.value = true
                }
                const data = await getTreeData(params , nodeData)
                return data
            },

            // 开启远程数据时 ， 远程加载的请求参数 , data为当前选中的节点数据，用于生成 请求子节点 的对应参数
            setParams:(data={})=>{
                const { Id , Type  } = data
                const params = {Id, Type}
                return params
            }

        },

        // 组件原生的 props 扩展定义
        defineProps:{
            // 自定义数据关键字 , 可根据实际数据字段进行配置
            fieldNames: {
                key: 'Id',
                title: 'Name',
            },

            // 拖拽事件结束触发
            dragEnd(ev , node){
                const { clientX,clientY} = ev
                let target = myPlayer.value.$el.getElementsByClassName('player_item');
                for (let i = 0; i < target.length; i++) {
                    const { top , left , bottom , right} = target[i].getBoundingClientRect();
                    if(clientX > left && clientX < right && clientY> top && clientY < bottom){
                        myPlayer.value.refresh(i , node.PlayUrl )
                    }
                }
            }
        }

    }

    // 一个计算属性 ref , 用来控制摄像头的样式
    const setTreeNodeClass = computed(() => {
        return (node = {})=>{
            const { disabled , Type } = node
            if(Type === 3 && !disabled){
                return 'online'
            }
            return ''
        }
    })

    // 视频组件配置
    const playerOptions = {

        // 当前视频请求地址,必填
        url: $Server.video.GetCac_FirmMonitorByAreaIdName,

        // 播放个数
        size: 4,

        // 是否在底部显示视频名称
        showTitle: true,

        // 水印展示 ， 如果设置为空或不设置，则不展示水印
        watermark: '黑晶科技',

        // 工具栏配置
        controller: [
            'recorder',  // 视频录制
            'screenshot',  // 视频截图
            //'call',  // 语音对讲
            // 'playback',  // 视频回放
            'refresh',  // 刷新
            'volume',  // 静音
            'fullScreen',  // 全屏
        ]

    }


</script>

<style scoped lang="less">
    .page-video{
        height: 100%;
        display: flex;
        .page_slide{
            width: 3rem;

            // 自定义树节点样式
            .tree_node{
                display: flex;
                overflow: hidden;

                .tree_node_title{
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    &.online{
                        color: #fff;
                        cursor:move ;
                    }
                }

                .tree_extra{
                    &.disabled{
                        color: #3f6292;
                        > span {
                            color: #3f6292;
                        }
                    }
                    > span {
                        color: #0bf4e4;
                    }
                }
            }

        }
        .page_content{
            flex: 1;
        }

        .btn_show{
            width: .15rem;
            height: .3rem;
            display: flex;
            margin: .3rem .1rem;
            justify-content: center;
            background-image: url("@assets/images/screen/showbtn.png");
            background-repeat: no-repeat;
            background-size: .15rem .3rem;
            cursor: pointer;
            &.hide{
                transform: rotate(180deg);
            }
        }

        /* 定义过渡样式 */
        .fade-enter-active, .fade-leave-active {
            transition: width .3s;
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */ {
            width: 0;
        }

    }
</style>